import React from 'react';
import {formatMessage} from './intl';
import PropTypes from 'prop-types';
import {Button} from 'antd';
import ExcelImport from '../common/ExcelImport';
import routes from './routes';

import fileTemplate from '../attachment/申报要素备件对应关系导入模板.xlsx';
const basePath = fetch.basePath || '';

const description = [
    formatMessage({
        id: 'fileImport.step2.description1',
        defaultMessage: '红色字段为必填项；'
    }),
    formatMessage({
        id: 'fileImport.step2.description3',
        defaultMessage: '备件编号 和 对方零件号必须唯一；'
    })
];

class PartImportPanel extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {loading: false};
    }
    onChange = () => this.setState({loading: !this.state.loading});
    onReturn = () => this.props.history.push(routes.query.url());
    render() {
        return ([
            <div key="return" className="page-toolbar">
                <Button type="primary" onClick={this.onReturn} disabled={this.state.loading}>
                    {formatMessage({
                        id: 'fileImport.btm.return',
                        defaultMessage: '返回'
                    })}
                </Button>
            </div>,
            <ExcelImport
                key="import"
                template={fileTemplate}
                action={`${basePath}/parts/api/v1/hsCodes/partimport`}
                description={description}
                beforeUpload={this.onChange}
                afterUpload={this.onChange}/>
        ]);
    }
}

PartImportPanel.propTypes = {
    history: PropTypes.object
};

export default PartImportPanel;
